<template>
	<view>
		<view class="bg-white">
			<cu-custom :bgColor="globalData.bgColor" :isBack="false">
				<template #content>
					<text class="text-darkgrey">{{ $t('user.user.l0s1in') }}</text>
				</template>
				<template #right>
					<view class="padding-lr">
						 <lang-change />
					</view>
				</template>
			</cu-custom>
			<view class="padding-top-xl">
				<view class="margin-top-xs">
					<view class="cu-avatar round flex head-bg" :style="'background-image:url(' + userInfo.avatar + ')'"></view>
					<view class="padding-top-xs">
						<view class="text-xxl text-darkgrey margin-top-sm text-center">{{ userInfo.nickName }}</view>
					</view>
				</view>
			</view>
			<!-- <view class="flex margin-top-xl padding-left-xs padding-right-xs">
				<view class="flex-sub bg-gradual-darkblue padding-sm margin-sm traffic">
					<view class="cu-card">
						<view class="text-white text-df" style="opacity: 0.7;">流量总数</view>
						<view class="text-white margin-top text-center quantity">8999899</view>
					</view>
				</view>
				<view class="flex-sub bg-gradual-gray padding-sm margin-sm turnover">
					<view class="cu-card ">
						<view class="text-white text-df" style="opacity: 0.7;">营业总额</view>
						<view class="text-white margin-top text-center quantity">{{999999}}</view>
					</view>
				</view>
			</view> -->
			<view class="margin-top-xl padding-top margin-sm cu-list menu text-darkgrey">
				<navigator class="cu-item" url="account/index">
					<view class="content">
						<image class="shop-icon" src="/static/public/icon/icon-1.png"></image>
						<text class="margin-left-sm">{{ $t('user.user.v0enx2') }}</text>
					</view>
				</navigator>
				<!-- <view class="cu-item">
					<view class="content">
						<image src="/static/public/icon/icon-2.png"></image>
						<text class="margin-left-sm">我的卡片</text>
					</view>
				</view> -->
				<navigator class="cu-item" url="setting/index">
					<view class="content">
						<image class="shop-icon" src="/static/public/icon/icon-3.png"></image>
						<text class="margin-left-sm">{{ $t('user.user.tsu3j8') }}</text>
					</view>
				</navigator>
				<navigator class="cu-item" url="terms-of-service/terms-of-service">
					<view class="content">
						<image class="shop-icon" src="/static/public/icon/icon-4.png"></image>
						<text class="margin-left-sm">{{ $t('terms-of-service.terms-of-service.61rp41') }}</text>
					</view>
				</navigator>
				<!-- <view class="cu-item">
					<view class="content">
						<image src="/static/public/icon/icon-5.png"></image>
						<text class="margin-left-sm">联系客服</text>
					</view>
				</view> -->
				<navigator class="cu-item" url="about">
					<view class="content">
						<image class="shop-icon" src="/static/public/icon/icon-6.png"></image>
						<text class="margin-left-sm">{{ $t('user.user.t6m7i6') }}</text>
					</view>
				</navigator>
			</view>
		</view>
		<view class="cu-item bg-white margin-top-sm exit-bg" @tap="onLogout">
			<view class="content text-darkgrey text-red text-center">{{ $t('user.user.f47epu') }}</view>
		</view>
	</view>
</template>

<script>
import LangChange from "@/components/lang-change/index.vue";
import service from '@/store/service';
import JimUtil from '@/utils/jim-util';
import api from '@/api/api';

export default {
	components:{
		LangChange
	},
	data() {
		return {
			globalData: getApp().globalData,
			showLogoutModal: false, // 登出弹框
			userInfo: {}
		};
	},
	onShow() {
		this.userInfo = service.getUser();
		// 更新消息消息未读数
		JimUtil.getJIMUnreadMsgCnt();
	},
	methods: {
		onLogout() {
			let that = this;
			uni.showModal({
				title: this.$t('bargain.bargaininfo.b8740a'),
				content: this.$t('user.user.8g86bs'),
				success: (res) => {
					if (res.confirm) {
						api.logout()
							.then((response) => {
								// 移出用户信息
								service.removeUser();
								//登出IM
								JimUtil.IMloginOut();
								//登出
								uni.reLaunch({
									url: '/pages/login/login'
								});
								// 重启应用
								// #ifdef APP-PLUS
								plus.runtime.restart();
								// #endif
							})
							.catch((response) => {
								// 移出用户信息
								service.removeUser();
								//登出
								uni.reLaunch({
									url: '/pages/login/login'
								});
								// 重启应用
								// #ifdef APP-PLUS
								plus.runtime.restart();
								// #endif
							});
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style>
.head-bg {
	width: 160rpx;
	height: 160rpx;
	margin: auto;
	border: #ffffff 5rpx solid;
	box-shadow: 0px 3px 10px #c2c2c2;
}

.traffic {
	height: 200rpx;
	border-radius: 20rpx;
	box-shadow: 0px 5px 10px #b9d3ee;
}

.quantity {
	font-size: 54rpx;
}

.turnover {
	height: 200rpx;
	border-radius: 20rpx;
	box-shadow: 0px 5px 10px #c2c2c2;
}

.exit-bg {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
}

.shop-icon {
		width: 48rpx;
		height: 48rpx;
		opacity: 0.8;
	}
</style>
